<template>
	<view class="approval-detail">

		<!-- 申请人信息卡片 -->
		<view class="user-card">
			<image class="avatar" :src="detail.user.avatar" mode="aspectFill" />
			<view class="user-info">
				<view class="user-name">{{ detail.user.username }}</view>
				<view class="user-desc">{{ detail.user.department }} / {{ detail.user.position }}</view>
			</view>
		</view>

    <!-- 申请详情卡片 -->
    <view class="detail-card">
      <view class="detail-title">{{ detail.user.username }} -
        {{
          detail.type == 1 ? "Timecard Replacement Request" : "Leave Request"
        }}</view>
      <view class="detail-row">
        <text class="label">{{ detail.type != 1?'Type of leave':'Application time' }}:</text>
        <text class="value">{{detail.createdTime}}</text>
      </view>
      <view class="detail-row" v-if="detail.type == 1">
        <text class="label">Replacement timecard type:</text>
        <text class="value">Forget to punch in</text>
      </view>
      <view class="detail-row" v-if="detail.type == 1">
        <text class="label">Attendance type:</text>
        <text class="value">{{$dayjs(detail.date).format('MMMM D, YYYY')}}</text>
      </view>
      <view class="detail-row" v-if="detail.type == 1">
        <text class="label">Replacement date:</text>
        <text class="value">Sign-in</text>
      </view>
      <view class="detail-row" v-if="detail.type == 1">
        <text class="label">Reasons for timecard replacement:</text>
        <text class="value">{{detail.data.content}}</text>
      </view>
      
      <view class="detail-row" v-if="detail.type != 1">
        <text class="label">Start time:</text>
        <text class="value">{{ detail.start_time }}</text>
      </view>
      <view class="detail-row" v-if="detail.type != 1">
        <text class="label">End time:</text>
        <text class="value">{{ detail.end_time }}</text>
      </view>
      <view class="detail-row" v-if="detail.type != 1">
        <text class="label">Duration/day:</text>
        <text class="value">Forget to punch in</text>
      </view>
      <view class="detail-row">
        <text class="label">Picture:</text>
      </view>
      <view class="img-list">
        <view v-for="(img, idx) in images" :key="idx" class="img-item">
          <image @click="previewImage(idx)" :src="img" mode="aspectFill" />
        </view>
      </view>
    </view>

		<!-- 审批记录卡片 -->
		<view class="approval-record-card">
			<view class="approval-title">Approval record</view>
			<view class="timeline">
				<uv-steps current="-1" inactiveColor="#A2E0C4" dot direction="column">
					<uv-steps-item class="timeline-item" v-for="item, index in approvalList" :key="index">
						<template v-slot:title>
							<view class="timeline-content">
								<view class="timeline-node">{{ nodeObj[index] }}</view>
								<view class="timeline-time">{{ item.update_time || item.audit_time }}</view>
								<view class="timeline-user">
									<text class="user">{{ item.user_info
										&& item.user_info
										.username || item.username
										}}</text>
									<template v-if="index">
										<text class="status"
											:class="item.audit_status == 3 ? 'agree' : item.audit_status == 4 ? 'reject' : 'reviewed'">{{
												item.audit_status == 3 ? 'Agree' : item.audit_status == 4 ? 'Turn down' : 'To be reviewed' }}</text>
										<text class="opinion" v-if="item.user_info && item.user_info.remark"
											@click="showOpinion(item)">Approval opinion <text
												class="arrow">&gt;</text></text>
									</template>
								</view>
							</view>
						</template>
					</uv-steps-item>
				</uv-steps>
			</view>
		</view>

		<!-- 底部固定按钮 -->
		<view class="bottom-buttons" v-if="detail.can_aduit">
			<button class="btn reject-btn" @click="handleReject">Reject</button>
			<button class="btn agree-btn" @click="handleAgree">Agree</button>
		</view>
	</view>
</template>

<script>
import { replacementAudit } from "@/api/approval";
import { replacementDetail } from "@/api/replacement";
import dayjs from '@/uni_modules/uv-ui-tools/libs/util/dayjs.js'
export default {
	data() {
		return {
			nodeObj: {
				0: "Submit an application",
				1: "Department head approval",
				2: "Approval by department leaders",
			},
			detail: {
        user: {
          avatar: "https://cdn-icons-png.flaticon.com/512/4140/4140048.png",
          name: "Mr. Lee.",
          department: "Project Department",
          position: "Project Manager",
        },
        images: [
          "https://img.icons8.com/ios/100/000000/image.png",
          "https://img.icons8.com/ios/100/000000/image.png",
          "https://img.icons8.com/ios/100/000000/image.png",
        ],
        approvalList: [
          {
            node: "Submit an application",
            time: "2025-03-20 09:54:23",
            user: "Mr. Lee.",
            status: "Agree",
            opinion: "同意，补卡理由合理。",
          },
          {
            node: "Department head approval",
            time: "2025-03-20 09:54:23",
            user: "Mr. Lee.",
            status: "Agree",
            opinion: "同意。",
          },
          {
            node: "Approval by department leaders",
            time: "2025-03-20 09:54:23",
            user: "Mr. Lee.",
            status: "Agree",
            opinion: "同意。",
          },
        ],
      },
			user: {
				avatar: 'https://cdn-icons-png.flaticon.com/512/4140/4140048.png',
				name: 'Mr. Lee.',
				department: 'Project Department',
				position: 'Project Manager'
			},
			images: [
				'https://img.icons8.com/ios/100/000000/image.png',
				'https://img.icons8.com/ios/100/000000/image.png',
				'https://img.icons8.com/ios/100/000000/image.png'
			],
			approvalList: []
		}
	},
	onLoad({ id }) {
		if (id) {
			this.id = id;
			this.getData()
		}
	},
	methods: {
		getData(){
			replacementDetail({ id: this.id }).then((res) => {
				let user = {
					...res.user,
					user_info: res.user
				};
				this.approvalList = [res.user, ...res.audit_users];
				this.images = res.data.images
				this.detail = {
					...res,
					
					start_time: res.start_time && dayjs(res.start_time).format('YYYY-MM-DD'),
					end_time: res.end_time && dayjs(res.end_time).format('YYYY-MM-DD'),
				};
				console.log(this.detail, 'detail');
			});
		},
		goBack() {
			uni.navigateBack();
		},
		previewImage(current) {
			uni.previewImage({
				current,
				urls: this.images
			});
		},
		onSubmit(status = 5) {//撤销
			replacementAudit({
				id: this.detail.id,
				status
			}).then(res => {
				uni.showToast({
					title: status == 3 ? "Application Agree" : 'Application rejected',
				});
				this.getData()
			})
		},
		showOpinion(item) {
			uni.showModal({
				title: 'Approval opinion',
				content: item.opinion
			});
		},
		handleReject() {
			let that = this
			uni.showModal({
				title: 'Confirmation',
				content: 'Are you sure you want to reject this application?',
				success: (res) => {
					if (res.confirm) {
						// 处理驳回逻辑
						that.onSubmit(4)
					}
				}
			});
		},
		handleAgree() {
			let that = this
			uni.showModal({
				title: 'Confirmation',
				content: 'Are you sure you want to approve this application?',
				success: (res) => {
					if (res.confirm) {
						// 处理同意逻辑
						that.onSubmit(3)
					}
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.approval-detail {
	background: #f5f7fa;
	min-height: 100vh;
	padding-bottom: 120rpx;
	/* 增加底部padding，为底部按钮腾出空间 */
}

.bottom-buttons {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	padding: 16rpx 30rpx;
	background: #fff;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
	z-index: 100;

	.btn {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		font-size: 32rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 10rpx;
		border: none;
	}

	.reject-btn {
		background: #ff5252;
	}

	.agree-btn {
		background: #19b36e;
	}
}

.nav-bar {
	display: flex;
	align-items: center;
	height: 56px;
	background: #fff;
	padding: 0 16px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);

	.back-btn {
		font-size: 22px;
		margin-right: 16px;
	}

	.title {
		font-size: 20px;
		font-weight: bold;
		flex: 1;
		text-align: center;
		margin-right: 38px;
	}
}

.user-card {
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 16px;
	margin: 16px 16px 0 16px;
	padding: 18px 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

	.avatar {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		margin-right: 14px;
		background: #f2f2f2;
	}

	.user-info {
		.user-name {
			font-size: 17px;
			font-weight: 600;
			color: #222;
		}

		.user-desc {
			font-size: 14px;
			color: #8a99a8;
			margin-top: 2px;
		}
	}
}

.detail-card {
	background: #fff;
	border-radius: 16px;
	margin: 15px 10px;

	.detail-title {
		color: #1a7f3c;
		font-weight: normal;
		font-size: 13px;
		text-align: left;
		padding: 8px 14px;
	}

	.detail-row {
		display: flex;
		padding: 0px 14px;
		align-items: flex-start;
		margin: 12px 0 5px 0;


		.label {
			color: #7a8fa6;
			font-size: 14px;
			min-width: 160px;
			flex-shrink: 0;
		}

		.value {
			color: #222;
			font-size: 14px;
			text-align: right;
			flex: 1;
			word-break: break-all;
		}
	}

	.img-list {
		display: flex;
		gap: 12px;
		margin: 8px 0 0 0;
		padding: 0px 14px 12px 14px;

		.img-item {
			width: 72px;
			height: 72px;
			border-radius: 10px;
			background: #fff;
			border: 1px solid #e5e6eb;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;

			image {
				width: 60px;
				height: 60px;
				border-radius: 8px;
			}
		}
	}
}

.approval-record-card {
	background: #fff;
	border-radius: 16px;
	margin: 15px;
	padding: 19px 14px 10px 14px;

	.approval-title {
		font-weight: normal;
		font-size: 13px;
		color: #1D2939;
		text-align: left;
		margin-left: 5px;
		margin-bottom: 19px;
	}

	.timeline {
		position: relative;
		// &::before {
		// 	content: '';
		// 	position: absolute;
		// 	left: 0;
		// 	top: 0;
		// 	width: 2px;
		// 	height: 100%;
		// 	background: #e5e6eb;
		// 	z-index: 0;
		// }

		.timeline-item {
			display: flex;
			align-items: flex-start;
			position: relative;

			.timeline-dot {
				width: 12px;
				height: 12px;
				background: #19b36e;
				border-radius: 50%;
				margin-right: 12px;
				margin-top: 6px;
				z-index: 1;
			}

			.timeline-content {
				border-bottom: 1px solid #EAECF0;
				flex: 1;
				margin-bottom: 6px;

				.timeline-node {
					font-weight: 500;
					font-size: 13px;
					color: #1D232E;
					line-height: 19px;
					text-align: left;
				}

				.timeline-time {
					font-weight: 500;
					font-size: 12px;
					color: #98A2B3;
					text-align: left;
					margin: 2px 0 4px 0;
					margin: 12px 0;
				}

				.timeline-user {
					display: flex;
					align-items: center;
					gap: 8px;
					font-weight: 500;
					font-size: 12px;
					color: #98A2B3;
					line-height: 19px;
					text-align: left;
					margin-bottom: 12px;

					.user {
						color: #7a8fa6;
						font-size: 12px;
					}

					.status {
						font-size: 12px;
						padding: 2px 10px;
						border-radius: 12px;
						background: #e6f7ec;
						color: #19b36e;
						margin-left: 4px;
					}

					.reject {
						background: #ffeaea;
						color: #ff5252;
					}

					.opinion {
						color: #3b82f6;
						font-size: 12px;
						margin-left: 8px;
						cursor: pointer;

						.arrow {
							font-size: 13px;
						}
					}
				}
			}
		}
	}
}
</style>